<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('export.export')"> </Crumb>
        <div class="content">
            <el-button
                    v-if="urlAvailible('export_operate')"
                    type="primary"
                    @click="openAdd"
            >{{$t('export.add')}}
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        :placeholder="$t('export.search')"
                        prefix-icon="el-icon-search"
                ></el-input>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="exportList"
                        v-loading="loading"
                        element-loading-text="Loading..."
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <div>
                                <div v-for="(value,key) in scope.row.sendGoodsOrderInformation" :key="value">
                                    <span>{{key}}</span>
                                    <span style="display: inline-block;margin-left: 30px;"><a :href="value">{{value | getName}}</a></span>
                                </div>
                                <a :href="scope.row.packingDetails">
                                    {{scope.row.packingDetails ? scope.row.packingDetails:'' | getName}}</a>
                                <el-collapse>
                                    <el-collapse-item title="IEL-Customer">
                                        <div class="link" v-if="urlAvailible('/iel/customer') &&  scope.row.ielCustomer">
                                            <div>
                                                <h5> IEL-IEC</h5>
                                                <div v-for="(item,idx) in JSON.parse(scope.row.ielCustomer) ? (JSON.parse(scope.row.ielCustomer).IELIEC) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.ielCustomer).iec2c">
                                                        单号:{{JSON.parse(scope.row.ielCustomer).iec2c.orderNo}} - 箱数:{{JSON.parse(scope.row.ielCustomer).iec2c.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>

                                            </div>
                                            <div>
                                                <h5> IEL-ITSS</h5>
                                                <div v-for="(item,idx) in JSON.parse(scope.row.ielCustomer) ? (JSON.parse(scope.row.ielCustomer).IELITSS) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.ielCustomer).itss2c">
                                                        单号:{{JSON.parse(scope.row.ielCustomer).itss2c.orderNo}} - 箱数:{{JSON.parse(scope.row.ielCustomer).itss2c.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>

                                            </div>
                                            <div>
                                                <h5> IEL-KST</h5>
                                                <div v-for="(item,idx) in JSON.parse(scope.row.ielCustomer) ? (JSON.parse(scope.row.ielCustomer).IELKST) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.ielCustomer).kst2c">
                                                        单号:{{JSON.parse(scope.row.ielCustomer).kst2c.orderNo}} - 箱数:{{JSON.parse(scope.row.ielCustomer).kst2c.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>

                                            </div>
                                            <div>
                                                <h5> IEL-TID</h5>
                                                <div v-for="(item,idx) in JSON.parse(scope.row.ielCustomer) ? (JSON.parse(scope.row.ielCustomer).IELTID) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.ielCustomer).tid2c">
                                                        单号:{{JSON.parse(scope.row.ielCustomer).tid2c.orderNo}} - 箱数:{{JSON.parse(scope.row.ielCustomer).tid2c.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>

                                            </div>
                                        </div>
                                        <div v-else>Data is not available</div>
                                    </el-collapse-item>
                                    <el-collapse-item title="SHI-IEL">
                                        <div class="link" v-if="urlAvailible('/jianzhan/iel') && scope.row.jianzhanIel">
                                            <div>
                                                <h5>SHI-IEL-IEC</h5>
                                                <div v-for="(item,idx) in JSON.parse(scope.row.jianzhanIel) ? (JSON.parse(scope.row.jianzhanIel).SHIIELIEC) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.jianzhanIel).iec">
                                                        单号:{{JSON.parse(scope.row.jianzhanIel).iec.orderNo}} - 箱数:{{JSON.parse(scope.row.jianzhanIel).iec.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>
                                            </div>
                                            <div>
                                                <h5>SHI-IEL-ITSS</h5>
                                                <div v-for="(item,idx) in JSON.parse(scope.row.jianzhanIel) ? (JSON.parse(scope.row.jianzhanIel).SHIIELITSS) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.jianzhanIel).itss">
                                                        单号:{{JSON.parse(scope.row.jianzhanIel).itss.orderNo}} - 箱数:{{JSON.parse(scope.row.jianzhanIel).itss.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>
                                            </div>
                                            <div>
                                                <h5>SHI-IEL-KST</h5>
                                                <div  v-for="(item,idx) in JSON.parse(scope.row.jianzhanIel) ? (JSON.parse(scope.row.jianzhanIel).SHIIELKST) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.jianzhanIel).kst">
                                                        单号:{{JSON.parse(scope.row.jianzhanIel).kst.orderNo}} - 箱数:{{JSON.parse(scope.row.jianzhanIel).kst.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>
                                            </div>
                                            <div>
                                                <h5>SHI-IEL-TID</h5>
                                                <div v-for="(item,idx) in JSON.parse(scope.row.jianzhanIel) ? (JSON.parse(scope.row.jianzhanIel).SHIIELTID) : []" :key="idx">
                                                    <div v-if="JSON.parse(scope.row.jianzhanIel).tid">
                                                        单号:{{JSON.parse(scope.row.jianzhanIel).tid.orderNo}} - 箱数:{{JSON.parse(scope.row.jianzhanIel).tid.price}}
                                                    </div>
                                                    <a :href="item">
                                                        {{item | getName}}
                                                    </a>
                                                </div>
                                            </div>

                                        </div>
                                        <div v-else>Data is not available</div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="$t('deli.index')"
                            type="index"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="shipInformation"
                            width="150px"
                            :label="$t('deli.shipInformation')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="originatingPort"
                            width="170px"
                            :label="$t('export.originatingPort')"
                            :filters="[{text:'ZJG',value:'ZJG'},{text:'SH',value:'SH'}]"
                            :filter-method="filterHandler"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="concentratedPortDateStr"
                            :label="$t('export.concentratedPortDateStr')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="leaveDateStr"
                            :label="$t('export.leaveDateStr')"
                            sortable
                    >
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            prop="destinationPort"
                            :label="$t('export.destinationPort')"
                            :filters="[{text:'POSO',value:'POSO'},{text:'WEDA',value:'WEDA'},{text:'JAK',value:'JAK'}]"
                            :filter-method="filterHandler"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="arrivalDateStr"
                            :label="$t('export.arrivalDateStr')"
                            sortable
                    >
                    </el-table-column>

                    <el-table-column
                            prop="releaseDateStr"
                            :label="$t('export.releaseDateStr')"
                    >
                    </el-table-column>
                    <el-table-column
                            :label="$t('export.status')"
                    >
                        <template slot-scope="scope">
                            <span>{{(scope.row.exportStatus) ? statusList[scope.row.exportStatus].label: statusList[0].label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="100px"
                    >
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="openEdit(scope.row)"
                                       v-if="urlAvailible('export_operate')" icon="el-icon-edit"></el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        :title="$t('export.export')"
                        :show-close="false"
                        :close-on-click-modal="false"
                        :visible.sync="dialogVisible"
                        width="80%"
                >
                    <el-form ref="form" :model="ruleForm" :rules="rule" label-width="150px" style="text-align: left">
                        <div style="display: flex">
                            <div style="flex: 1">
                                <el-form-item :label="$t('deli.shipInformation')" prop="shipInformation">
                                    <div class="ship">
                                        <el-input v-model="ruleForm.shipInformation" :placeholder="$t('deli.shipInformation')" size="small"
                                                  class="my-input"></el-input>
                                        <tip-list :data="shipList" @selected="selected"></tip-list>
                                    </div>

                                </el-form-item>
                                <el-form-item :label="$t('export.originatingPort')">
                                    <el-input v-model="ruleForm.originatingPort" placeholder="始发港" size="small"
                                              class="my-input"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('export.concentratedPortDateStr')">
                                    <el-date-picker v-model="ruleForm.concentratedPortDateStr" type="date"
                                                    :placeholder="$t('export.concentratedPortDateStr')" class="my-input" size="small"
                                                    value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                                <el-form-item :label="$t('export.leaveDateStr')">
                                    <el-date-picker v-model="ruleForm.leaveDateStr" type="date" :placeholder="$t('export.leaveDateStr')"
                                                    size="small" class="my-input"
                                                    value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                                <el-form-item :label="$t('export.destinationPort')" prop="destinationPort">
                                    <el-select v-model="ruleForm.destinationPort" :placeholder="$t('export.destinationPort')" class="my-input" size="small">
                                        <el-option
                                                v-for="item in [{t:'POSO',v:1},{t:'WEDA',v:2},{t:'MKS',v:4},{t:'JKT',v:5}]"
                                                :key="item.t"
                                                :label="item.t"
                                                :value="item.t">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('export.arrivalDateStr')">
                                    <el-date-picker v-model="ruleForm.arrivalDateStr" :placeholder="$t('export.arrivalDateStr')"
                                                    class="my-input" value-format="yyyy-MM-dd"
                                                    size="small"></el-date-picker>
                                </el-form-item>
                                <el-form-item :label="$t('export.releaseDateStr')">
                                    <el-date-picker v-model="ruleForm.releaseDateStr" :placeholder="$t('export.releaseDateStr')"
                                                    class="my-input" value-format="yyyy-MM-dd"
                                                    size="small"></el-date-picker>
                                </el-form-item>
                            </div>
                            <div style="flex: 1;">
                                <el-form-item :label="$t('export.boxNo')">
                                    <el-input v-model="ruleForm.totalBox"
                                              :placeholder="$t('export.boxNo')"
                                              class="my-input"
                                              size="small"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('deli.sendGoodsContract')">
                                    <el-select v-model="ruleForm.freightList" style="width: 100%" class="my-input"
                                               @change="freightListChange"
                                               multiple :placeholder="$t('deli.sendGoodsContract')" size="small">
                                        <el-option
                                                v-for="item in deliveryList"
                                                :key="item.id"
                                                :label="item.sendGoodsContract"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('export.status')">
                                    <el-select v-model="ruleForm.exportStatus" class="my-input" placeholder="Status">
                                        <el-option
                                                v-for="item in statusList"
                                                :key="item.key"
                                                :label="item.label"
                                                :value="item.key">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <div>
                                    <label for="purchase">
                                        {{$t('export.shipDetail')}}
                                    </label>
                                    <span style="margin-left: 10px;">{{ruleForm.packingDetails | getName}}</span>
                                    <input type="file" @change="fileChange1($event,'packingDetails')" id="purchase"
                                           v-show="false">
                                </div>
                                <div>
                                    <label for="b">
                                        {{$t('export.ship')}}
                                    </label>
                                    <span style="margin-left: 10px;">{{ruleForm.shipmentData | getName}}</span>
                                    <input type="file" @change="fileChange1($event,'shipmentData')" id="b"
                                           v-show="false">
                                </div>
                                <div>
                                    <label for="c">
                                        SPPB
                                    </label>
                                    <span style="margin-left: 10px;">{{ruleForm.sppb | getName}}</span>
                                    <input type="file" @change="fileChange1($event,'sppb')" id="c" v-show="false">
                                </div>

                                <div class="upload" v-if="urlAvailible('/iel/customer')">
                                    <h3>IEL-Customer</h3>
                                    <el-select size="small" v-model="iel2Customer" placeholder="Select">
                                        <el-option
                                                v-for="item in ['IEL-ITSS','IEL-TID','IEL-IEC','IEL-KST']"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                    <div v-show="iel2Customer === 'IEL-ITSS' " class="file-box">
                                        <div>
                                            <el-input v-model="itss2c.orderNo" class="input" size="small"
                                                      placeholder="单号"></el-input>
                                            <el-input v-model="itss2c.price" class="input" size="small"
                                                      placeholder="箱数"></el-input>
                                            <label for="iel1">IEL-ITSS</label>
                                            <div v-for="(item,idx) in IELITSS" :key="item">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'IELITSS')"></i>
                                            </div>
                                            <input type="file" @change="fileChange($event,'IELITSS')" id="iel1"
                                                   v-show="false">
                                        </div>
                                    </div>
                                    <div v-show="iel2Customer === 'IEL-TID' " class="file-box">
                                        <div>
                                            <el-input v-model="tid2c.orderNo" class="input" size="small"
                                                      placeholder="单号"></el-input>
                                            <el-input v-model="tid2c.price" class="input" size="small"
                                                      placeholder="箱数"></el-input>
                                            <label for="iel2">IEL-TID</label>
                                            <div v-for="(item,idx) in IELTID" :key="item">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'IELTID')"></i>
                                            </div>
                                            <input type="file" @change="fileChange($event,'IELTID')" id="iel2"
                                                   v-show="false">
                                        </div>
                                    </div>
                                    <div v-show="iel2Customer === 'IEL-IEC' " class="file-box">
                                        <div>
                                            <el-input v-model="iec2c.orderNo" class="input" size="small"
                                                      placeholder="单号"></el-input>
                                            <el-input v-model="iec2c.price" class="input" size="small"
                                                      placeholder="箱数"></el-input>
                                            <label for="iel3">IEL-IEC</label>
                                            <div v-for="(item,idx) in IELIEC" :key="item">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'IELIEC')"></i>
                                            </div>
                                            <input type="file" @change="fileChange($event,'IELIEC')" id="iel3"
                                                   v-show="false">
                                        </div>
                                    </div>
                                    <div v-show="iel2Customer === 'IEL-KST' " class="file-box">
                                        <div>
                                            <el-input v-model="kst2c.orderNo" class="input" size="small"
                                                      placeholder="单号"></el-input>
                                            <el-input v-model="kst2c.price" class="input" size="small"
                                                      placeholder="箱数"></el-input>
                                            <label for="iel4">IEL-KST</label>
                                            <div v-for="(item,idx) in IELKST" :key="idx">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'IELKST')"></i>
                                            </div>
                                            <input type="file" @change="fileChange($event,'IELKST')" id="iel4"
                                                   v-show="false">
                                        </div>
                                    </div>
                                </div>
                                <div class="upload" v-if="urlAvailible('/jianzhan/iel')">
                                    <h3>SHI-IEL</h3>
                                    <el-select v-model="jianzhan2Iel" placeholder="Select" size="small">
                                        <el-option
                                                v-for="item in ['SHI-IEL-ITSS','SHI-IEL-TID','SHI-IEL-IEC','SHI-IEL-KST']"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                    <div class="file-box" v-show="jianzhan2Iel === 'SHI-IEL-ITSS' ">
                                        <div>
                                            <el-input v-model="itss.orderNo" class="input" size="small"
                                                      :placeholder="$t('export.box')"></el-input>
                                            <el-input v-model="itss.price" class="input" size="small"
                                                      :placeholder="$t('export.boxNo')"></el-input>
                                            <label for="iel5">SHI-IEL-ITSS</label>
                                            <div v-for="(item,idx) in SHIIELITSS" :key="idx">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'SHIIELITSS')"></i>
                                            </div>
                                            <input type="file" @change="fileChange($event,'SHIIELITSS')" id="iel5"
                                                   v-show="false">
                                        </div>
                                    </div>
                                    <div class="file-box" v-show="jianzhan2Iel === 'SHI-IEL-TID' ">
                                        <div>
                                            <el-input v-model="tid.orderNo" class="input" size="small"
                                                      :placeholder="$t('export.box')"></el-input>
                                            <el-input v-model="tid.price" class="input" size="small"
                                                      :placeholder="$t('export.boxNo')"></el-input>
                                            <label for="iel6">SHI-IEL-TID</label>
                                            <div v-for="(item,idx) in SHIIELTID" :key="idx">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'SHIIELTID')"></i>

                                            </div>
                                            <input type="file" @change="fileChange($event,'SHIIELTID')" id="iel6"
                                                   v-show="false">
                                        </div>
                                    </div>
                                    <div class="file-box" v-show="jianzhan2Iel === 'SHI-IEL-IEC' ">
                                        <div>
                                            <el-input v-model="iec.orderNo" class="input" size="small"
                                                      :placeholder="$t('export.box')"></el-input>
                                            <el-input v-model="iec.price" class="input" size="small"
                                                      :placeholder="$t('export.boxNo')"></el-input>
                                            <label for="iel7">SHI-IEL-IEC</label>
                                            <div v-for="(item,idx) in SHIIELIEC" :key="idx">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'SHIIELIEC')"></i>

                                            </div>
                                            <input type="file" @change="fileChange($event,'SHIIELIEC')" id="iel7"
                                                   v-show="false">
                                        </div>
                                    </div>
                                    <div class="file-box" v-show="jianzhan2Iel === 'SHI-IEL-KST'    ">
                                        <div>
                                            <el-input v-model="kst.orderNo" class="input" size="small"
                                                      :placeholder="$t('export.box')"></el-input>
                                            <el-input v-model="kst.price" class="input" size="small"
                                                      :placeholder="$t('export.boxNo')"></el-input>
                                            <label for="iel8">SHI-IEL-KST</label>
                                            <div v-for="(item,idx) in SHIIELKST" :key="idx">
                                                <span style="margin-left: 10px;">{{item | getName}}</span>
                                                <i class="el-icon-close icon" @click="deleteItem(idx,'SHIIELKST')"></i>

                                            </div>
                                            <input type="file" @change="fileChange($event,'SHIIELKST')" id="iel8"
                                                   v-show="false">
                                        </div>
                                    </div>


                                </div>
                            </div>

                        </div>

                        <div style="border: 1px dashed #ddd;position: relative;margin-bottom: 20px; ">
                            <el-button type="primary" size="small" @click="addInvoice"><i class="el-icon-plus"></i>
                            </el-button>

                            <div v-for="(item,idx) in ruleForm.invoice" :key="idx">
                                <el-form-item :label="$t('export.bl')">
                                    <el-input v-model="item.billOfLading" size="small" style="width: 35%"
                                              placeholder="提单号"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('export.blDate')">
                                    <el-date-picker v-model="item.billOfLadingDateStr" size="small"
                                                    value-format="yyyy-MM-dd" type="date"
                                                    placeholder="Date"></el-date-picker>
                                </el-form-item>
                                <div style="display: flex;border-bottom: 1px solid #000">
                                    <div style="flex: 1">
                                        <el-form-item :label="$t('export.invoice')">
                                            <el-input v-model="item.invoice" size="small" class="my-input"
                                                      :placeholder="$t('export.invoice')"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="$t('export.invoiceAmount')">
                                            <el-currency-input v-model="item.invoicePrice" size="small"
                                                               style="width: 40%;" :placeholder="$t('export.invoiceAmount')"/>
                                            <span style="margin-left: 20px;">{{$t('export.rate')}}</span>
                                            <el-input v-model="item.curRate" size="small" :placeholder="$t('export.rate')"
                                                      style="width: 40%"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="$t('export.invoiceAmount1')">
                                            <el-currency-input :type=1 v-model="item.invoicePriceUS" size="small"
                                                               class="my-input" :placeholder="$t('export.invoiceAmount1')"/>
                                        </el-form-item>

                                        <el-form-item label="Form E">
                                            <el-input v-model="item.formENumber" placeholder="Form E Number"
                                                      class="my-input" size="small"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="$t('export.formePrice')">
                                            <el-currency-input v-model="item.formEPrice" :type=1 size="small"
                                                               placeholder="Form E Price" class="my-input"/>
                                        </el-form-item>
                                        <el-form-item :label="$t('export.seaPrice')">
                                            <el-input v-model="item.cubic" :placeholder="$t('export.cubic')" size="small"
                                                      style="width: 50%;"
                                                      @change="seaFrightChange($event,item)"></el-input>
                                            <el-select v-model="item.seaFrightPriceCurrency" :placeholder="$t('export.rate')"
                                                       size="small" style="width: 50%; display: inline-block">
                                                <el-option
                                                        v-for="item in ['$','¥']"
                                                        :key="item"
                                                        :label="item"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                            <el-input v-model="item.seaFrightUnitPrice"
                                                      placeholder="sea fright unit price" size="small"
                                                      @change="seaFrightChange($event,item)"
                                                      style="width: 50%;"></el-input>
                                            <el-input v-model="item.seaCurRate" size="small" placeholder="Currency Rate"
                                                      style="width: 50%"
                                                      @change="seaFrightChange($event,item)"></el-input>
                                            <el-currency-input :type=2 v-model="item.seaFrightPrice"
                                                               placeholder="Sea Fright Price"
                                                               style="display: inline-block;width: 50%;"/>
                                        </el-form-item>
                                    </div>
                                    <div style="flex: 1">


                                        <el-form-item label="pib Aju">
                                            <el-input v-model="item.pibAju" placeholder="pib Aju" class="my-input"
                                                      size="small"></el-input>
                                        </el-form-item>
                                        <el-form-item label="BM">
                                            <!--<el-checkbox v-model="item.isBm" @change="bmChange($event,item)"-->
                                            <!--style="background: white;color: #409eff">Has BM ?-->
                                            <!--</el-checkbox>-->
                                            <el-currency-input v-model="item.bm" :type=2 class="my-input" size="small"
                                                               placeholder="BM" @change="priceChange($event,item)"/>
                                        </el-form-item>
                                        <el-form-item label="PPN">
                                            <el-currency-input v-model="item.ppn" :type=2 class="my-input" size="small"
                                                               placeholder="PPN" @change="priceChange($event,item)"/>
                                        </el-form-item>
                                        <el-form-item label="PPH">
                                            <el-currency-input v-model="item.pph" :type=2 class="my-input" size="small"
                                                               placeholder="PPH" @change="priceChange($event,item)"/>
                                        </el-form-item>
                                        <el-form-item label="Pib Price(IDR)">
                                            <el-currency-input :type=2 v-model="item.pibPrice" class="my-input"
                                                               size="small" placeholder="Pib Price"/>
                                        </el-form-item>
                                        <el-form-item label="Handling Unit Price(IDR)" label-width="200px">
                                            <el-currency-input :type=2 v-model="item.handlingUnitPrice" placeholder="handling fee unit price" @change="handlingFeeChange($event,item)" size="small" style="width: 50%;"/>
                                        </el-form-item>
                                        <el-form-item label="Handling  Fee(IDR)">
                                            <el-currency-input v-model="item.handlingFee" :type=2  class="my-input" size="small" placeholder="Handling Fee" style="width: 50%;"/>
                                        </el-form-item>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <el-form-item :label="$t('export.groundFee')">
                        <el-currency-input v-model="ruleForm.groundCost" size="small"
                        :placeholder="$t('export.groundFee')"/>
                        </el-form-item>

                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="close">Cancel</el-button>
                        <el-button type="primary" @click="submitForm"
                                   v-if="urlAvailible('export_operate')">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import tipList from '@/components/common/tipList'
    import mixins from '../../util/mixins'
    import authMixins from '../../util/authMixins'
    import {
        deliveryList,
        exportList,
        addExport,
        modExport,
        getShipInfo,
        shipDetail,
        getTotalBox
    } from "../../api/jianzhan";
    import {upLoadFiles} from "../../api";
    import {ERROR_OK} from "../../util/config";
    import {getFileName} from "../../util";

    export default {
        name: "export",
        mixins: [mixins, authMixins],
        data() {
            return {
                list: [],
                iel2Customer: '',
                jianzhan2Iel: '',
                deliveryList: [],
                loading: true,
                shipList: [],
                itss: {
                    price: 0,
                    orderNo: 0
                },
                tid: {
                    price: 0,
                    orderNo: 0
                },
                iec: {
                    price: 0,
                    orderNo: 0
                },
                kst: {
                    price: 0,
                    orderNo: 0
                },
                itss2c: {
                    price: 0,
                    orderNo: 0
                },
                tid2c: {
                    price: 0,
                    orderNo: 0
                },
                iec2c: {
                    price: 0,
                    orderNo: 0
                },
                kst2c: {
                    price: 0,
                    orderNo: 0
                },
                SHIIELITSS: [],
                SHIIELTID: [],
                SHIIELIEC: [],
                SHIIELKST: [],
                IELITSS: [],
                IELTID: [],
                IELIEC: [],
                IELKST: [],
                ruleForm: {
                    groundCost:0,
                    shipInformation: '',
                    destinationPort: '',
                    arrivalDateStr: '',
                    leaveDateStr: '',
                    totalBox: '',
                    freightList: [],
                    concentratedPortDateStr: '',
                    releaseDateStr: '',
                    originatingPort: '',
                    shipmentPrice: '',
                    packingDetails: '',
                    shipmentData: '',
                    sppb: '',
                    jianzhanIel: "",
                    ielCustomer: "",
                    invoice: [{
                        handlingUnitPrice: 0,
                        seaFrightUnitPrice: 0,
                        cubic: 0,
                        curRate: 4200,
                        seaCurRate: 4200,
                        billOfLading: '',
                        billOfLadingDate: '',
                        invoicePriceUs: 0,
                        invoice: '',
                        invoicePrice: 0,
                        formENumber: '',
                        formEPrice: 0,
                        pibAju: '',
                        pibPrice: 0,
                        seaFrightPrice: 0,
                        seaFrightPriceCurrency: '',
                        handlingFee: 0,
                        isBm: false,
                        ppn: '',
                        bm: '',
                        pph: ''
                    }],
                    exportStatus: ''
                },
                fileList: [],
                rule: {
                    shipInformation: [
                        {required: true, message: '船名船次不能为空', trigger: 'blur'},
                    ],
                    freightList: [
                        {required: true, message: '发运合同不能为空', trigger: 'blur'}
                    ]
                },
                key: '',
                dialogVisible: false
            }
        },
        filters: {
            getName(name) {
                return getFileName(name)
            }
        },
        created() {
            this.getExportList();
            this.getDeliveryList();
            this.getShipInfo();
            this.statusList = [{key: 0, label: '出厂／Leave Factory'}, {key: 1, label: '开船／DEPARTURED'}, {
                key: 2,
                label: '到港／ARRIVED'
            }, {key: 3, label: '放行／SPPB'}, {key: 4, label: '入库／Stock In'}]
        },
        computed: {
            exportList() {
                return this.list.filter(item => item.shipInformation.includes(this.key)).slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
            }
        },
        methods: {
            async freightListChange(v) {
                if (v.length) {
                    const {status, data} = await getTotalBox(v.join(','));
                    if (status === ERROR_OK) {
                        this.$set(this.ruleForm, 'totalBox', data)
                    }
                } else {
                    this.$set(this.ruleForm, 'totalBox', 0)

                }
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            deleteItem(idx, label) {
                this[label].splice(idx, 1)
            },
            bmChange(v, item) {
                this.priceChange(item.pibPrice, item)
            },
            priceChange(v, item) {
                if (item.bm && item.ppn && item.pph) {
                    const price = parseFloat(item.bm) + parseFloat(item.pph) + parseFloat(item.ppn);
                    this.$set(item, 'pibPrice', price);
                }
            },
            handlingFeeChange(v, item) {
                if (item.cubic && item.handlingUnitPrice) {
                    const price = parseFloat(item.cubic) * parseFloat(item.handlingUnitPrice);
                    this.$set(item, 'handlingFee', price);
                }
            },
            seaFrightChange(v, item) {
                this.handlingFeeChange(v,item);
                if (item.cubic && item.seaFrightUnitPrice && item.seaCurRate) {
                    const price = parseFloat(item.cubic) * parseFloat(item.seaFrightUnitPrice) * parseFloat(item.seaCurRate);
                    this.$set(item, 'seaFrightPrice', price);
                }
            },
            async selected(ship) {
                this.ruleForm.shipInformation = ship;
                const {status, data} = await shipDetail(ship);
                if (status === ERROR_OK) {
                    this.ruleForm.originatingPort = data.originatingPort;
                    this.ruleForm.arrivalDateStr = data.arrivalDateStr;
                    this.ruleForm.concentratedPortDateStr = data.concentratedPortDateStr;
                    this.ruleForm.destinationPort = data.destinationPort;
                    this.ruleForm.leaveDateStr = data.leaveDateStr;
                    this.ruleForm.releaseDateStr = data.releaseDateStr;
                    this.ruleForm.shipDateStr = data.shipDateStr;
                    this.ruleForm.shipmentPrice = data.shipmentPrice;
                    this.ruleForm.packingDetails = data.packingDetails;
                    this.ruleForm.shipmentData = data.shipmentData;
                    // this.ruleForm.sppb = data.sppb;
                }
            },
            async getShipInfo() {
                const {status, data} = await getShipInfo();
                if (status === ERROR_OK) {
                    this.shipList = data;
                }
            },
            clear() {
                this.itss = {
                    price: 0,
                    orderNo: 0
                };
                this.tid = {
                    price: 0,
                    orderNo: 0
                };
                this.iec = {
                    price: 0,
                    orderNo: 0
                };
                this.kst = {
                    price: 0,
                    orderNo: 0
                };
                this.itss2c = {
                    price: 0,
                    orderNo: 0
                };
                this.tid2c = {
                    price: 0,
                    orderNo: 0
                };
                this.iec2c = {
                    price: 0,
                    orderNo: 0
                };
                this.kst2c = {
                    price: 0,
                    orderNo: 0
                };
                this.SHIIELITSS = [];
                this.SHIIELTID = [];
                this.SHIIELIEC = [];
                this.SHIIELKST = [];
                this.IELITSS = [];
                this.IELTID = [];
                this.IELIEC = [];
                this.IELKST = [];
                this.ruleForm = {
                    groundCost:0,
                    shipInformation: '',
                    destinationPort: '',
                    arrivalDateStr: '',
                    leaveDateStr: '',
                    totalBox: '',
                    concentratedPortDateStr: '',
                    releaseDateStr: '',
                    originatingPort: '',
                    shipmentPrice: 0,
                    packingDetails: '',
                    shipmentData: '',
                    sppb: '',
                    freightList: [],
                    invoice: [{
                        handlingUnitPrice: 0,
                        seaFrightUnitPrice: 0,
                        cubic: 0,
                        curRate: 4200,
                        seaCurRate: 4200,
                        billOfLading: '',
                        invoicePriceUs: 0,
                        billOfLadingDate: '',
                        invoice: '',
                        invoicePrice: 0,
                        formENumber: '',
                        formEPrice: 0,
                        pibAju: '',
                        pibPrice: 0,
                        seaFrightPrice: 0,
                        seaFrightPriceCurrency: '',
                        handlingFee: 0,
                        isBm: false,
                        ppn: 0,
                        bm: 0,
                        pph: 0
                    }],
                    exportStatus: ''
                };
            },
            addInvoice() {
                this.ruleForm.invoice.push({
                    handlingUnitPrice: 0,
                    seaFrightUnitPrice: 0,
                    cubic: 0,
                    curRate: 4200,
                    seaCurRate: 4200,
                    billOfLading: '',
                    billOfLadingDate: '',
                    invoicePriceUs: 0,
                    invoice: '',
                    invoicePrice: 0,
                    formENumber: '',
                    formEPrice: 0,
                    pibAju: '',
                    pibPrice: 0,
                    seaFrightPrice: 0,
                    seaFrightPriceCurrency: '',
                    handlingFee: 0,
                    ppn: 0,
                    bm: 0,
                    pph: 0
                })
            },
            async getDeliveryList() {
                const {status, data} = await deliveryList(0);
                if (status === ERROR_OK) {
                    this.deliveryList = data
                }
            },
            reduceConsignment() {
                const freightList = this.ruleForm.freightList;
                this.deliveryList.forEach((item, idx) => {
                    freightList.forEach(f => {
                        if (item.id === f) {
                            this.deliveryList.splice(idx, 1);
                        }
                    })
                })
            },
            close() {
                if (this.ruleForm.shipInformation) {
                    if (window.confirm('表单未提交是否关闭')) {
                        if (this.ruleForm.id) {
                            this.deliveryList.pop();
                        }
                        this.dialogVisible = false
                    }
                } else {
                    this.dialogVisible = false
                }
            },
            submitForm() {
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        const {sppb,groundCost, shipmentData, shipInformation, packingDetails, destinationPort, arrivalDateStr, leaveDateStr, totalBox, exportStatus, id, concentratedPortDateStr, releaseDateStr, originatingPort, shipmentPrice} = this.ruleForm;
                        let {freightList, invoice} = this.ruleForm;
                        freightList = freightList.join(',');
                        invoice = JSON.stringify(invoice);
                        let jianzhanIel = {};
                        let ielCustomer = {};
                        const {
                            SHIIELITSS,
                            SHIIELTID,
                            SHIIELIEC,
                            SHIIELKST,
                            IELITSS,
                            IELTID,
                            IELIEC,
                            IELKST,
                            itss,
                            itss2c,
                            tid,
                            tid2c,
                            iec,
                            iec2c,
                            kst,
                            kst2c
                        } = this;
                        jianzhanIel.SHIIELTID = SHIIELTID;
                        jianzhanIel.SHIIELITSS = SHIIELITSS;
                        jianzhanIel.SHIIELIEC = SHIIELIEC;
                        jianzhanIel.SHIIELKST = SHIIELKST;
                        jianzhanIel.itss = itss;
                        jianzhanIel.tid = tid;
                        jianzhanIel.iec = iec;
                        jianzhanIel.kst = kst;
                        ielCustomer.IELITSS = IELITSS;
                        ielCustomer.IELTID = IELTID;
                        ielCustomer.IELIEC = IELIEC;
                        ielCustomer.IELKST = IELKST;
                        ielCustomer.itss2c = itss2c;
                        ielCustomer.tid2c = tid2c;
                        ielCustomer.iec2c = iec2c;
                        ielCustomer.kst2c = kst2c;
                        jianzhanIel = JSON.stringify(jianzhanIel);
                        ielCustomer = JSON.stringify(ielCustomer);

                        if (this.ruleForm.id) {
                            const {status} = await modExport(
                                {
                                    groundCost,
                                    sppb,
                                    shipmentData,
                                    ielCustomer,
                                    jianzhanIel,
                                    id,
                                    shipInformation,
                                    packingDetails,
                                    destinationPort,
                                    arrivalDateStr,
                                    leaveDateStr,
                                    totalBox,
                                    exportStatus,
                                    freightList,
                                    invoice,
                                    concentratedPortDateStr,
                                    releaseDateStr,
                                    originatingPort,
                                    shipmentPrice
                                });
                            if (status === ERROR_OK) {
                                this.$notify.success('修改出口单成功');
                                this.clear();
                                this.getExportList();
                                this.dialogVisible = false
                            }
                        } else {
                            const {status, msg} = await addExport({
                                sppb,
                                groundCost,
                                shipmentData,
                                ielCustomer,
                                jianzhanIel,
                                shipInformation,
                                packingDetails,
                                destinationPort,
                                arrivalDateStr,
                                leaveDateStr,
                                totalBox,
                                exportStatus,
                                freightList,
                                invoice,
                                concentratedPortDateStr,
                                releaseDateStr,
                                originatingPort,
                                shipmentPrice
                            });
                            if (status === ERROR_OK) {
                                this.$notify.success('添加出口单成功');
                                this.clear();
                                this.getExportList();
                                this.dialogVisible = false
                            } else {
                                this.$notify.error(msg)
                            }
                        }
                    }
                })
            },
            async getExportList() {
                const {status, data, msg} = await exportList();
                if (status === ERROR_OK) {
                    this.list = data;
                    this.loading = false
                } else {
                    this.$notify.error(msg)
                }
            },

            async fileChange1(e, label) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('upload_file', item)
                });
                const {success, file_path} = await upLoadFiles(formData);
                if (success) {
                    this.$set(this.ruleForm, label, file_path[0])
                }
                e.target.value = '';
            },
            async fileChange(e, label) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('upload_file', item)
                });
                const {success, file_path} = await upLoadFiles(formData);
                if (success) {
                    this.$set(this, label, this[label].concat(file_path))
                }
                e.target.value = '';
            },
            openAdd() {
                this.clear()
                this.getDeliveryList();
                this.dialogVisible = true
            },
            openEdit(row) {
                if (row.sendContactNumber) {
                    const delivery = Object.keys(row.sendContactNumber).map(item => {
                        return {id: parseInt(item, 10), sendGoodsContract: row.sendContactNumber[item]}
                    });
                    delivery.forEach(item => {
                        const target = this.deliveryList.find(f => {
                            return item.id === f.id
                        });
                        if (!target) {
                            this.deliveryList.push(item)
                        }
                    });
                }

                const ielCustomer = JSON.parse(row.ielCustomer) || {};
                const jianzhanIel = JSON.parse(row.jianzhanIel) || {};
                this.selected(row.shipInformation);
                const {
                    IELITSS,
                    IELTID,
                    IELIEC,
                    IELKST,
                    itss2c,
                    tid2c,
                    iec2c,
                    kst2c
                } = ielCustomer;
                const {
                    SHIIELITSS,
                    SHIIELTID,
                    SHIIELIEC,
                    SHIIELKST,
                    itss,
                    tid,
                    iec,
                    kst
                } = jianzhanIel;
                this.itss2c = itss2c || {};
                this.tid2c = tid2c || {};
                this.iec2c = iec2c || {};
                this.kst2c = kst2c || {};
                this.itss = itss || {};
                this.tid = tid || {};
                this.iec = iec || {};
                this.kst = kst || {};
                this.SHIIELTID = SHIIELTID || [];
                this.SHIIELITSS = SHIIELITSS || [];
                this.SHIIELIEC = SHIIELIEC || [];
                this.SHIIELKST = SHIIELKST || [];
                this.IELITSS = IELITSS || [];
                this.IELTID = IELTID || [];
                this.IELIEC = IELIEC || [];
                this.IELKST = IELKST || [];
                this.ruleForm = {
                    ...row,
                    freightList: row.freightList ? row.freightList.toString().split(',').map(item => parseInt(item, 10)) : [],
                    invoice: JSON.parse(row.invoice)
                };
                this.dialogVisible = true
            }
        },
        watch: {
            exportList(list) {
                this.total = list.length
            }
        },
        components: {
            Crumb, Search, tipList
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    @import "../../css/variable";

    .content {
        @include content
    }

    .file-box {
        display: inline-block;
        vertical-align: top;
        width: 300px;
        margin-left: 30px;
        border: 1px solid #ddd;
    }

    .ship {
        position: relative;
        &:hover {
            .shipList {
                display: block;
            }
        }
    }

    .label-btn {
        display: block;
        width: 150px;
        height: 30px;
        line-height: 30px;
        background-color: $bg-theme;
        color: white;
        padding: 0 5px;
        cursor: pointer;
        border-radius: 3px;
        text-align: center;
    }

    .file-list {
        font-size: 16px;
        .file-item {
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid #ddd;

        }
    }

    .link {
        a {
            color: #409eff;
            text-decoration: underline;
        }
    }

    label {
        cursor: pointer;
        display: inline-block;
        vertical-align: center;
        margin-top: 3px;
        width: 150px;
        height: 30px;
        line-height: 30px;
        background: $bg-theme;
        color: white;
        text-align: center;
    }
</style>